<%-- 
    Document   : department
    Created on : May 21, 2018, 9:39:08 PM
    Author     : Andy
--%>

<%@page import="org.springframework.beans.factory.annotation.Autowired"%>
<%@page import="com.antexpress.pojo.DeptDetail"%>
<%@page import="java.util.List"%>
<%@page import="com.antexpress.common.Response"%>
<%@page import="com.antexpress.common.Const"%>
<%@page import="com.antexpress.pojo.Employee"%>
<%@page import="com.antexpress.bean.Authentication"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Employee -- Ant Express</title>
        <link rel="shortcut icon" href="static/img/ant-logo.png">
        <link href="static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/normalize.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/default.css" rel="stylesheet" type="text/css"/>
        <link href="static/dist/css/jquery.secretnav.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
        <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/edbox.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/selectpage.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <%
            if(!Authentication.isLogin(session)) {
                response.sendRedirect("index.jsp");
                return;
            }
            Employee emp = (Employee)session.getAttribute(Const.CURRENT_USER);
            if(!Authentication.isHRAdmin(emp)){
                response.sendRedirect("404.jsp");
                return;
            }
        %>
        <div class="sn-outer-wrapper sn-moveleft modalview">
            <div class="sn-content-wrapper transform" style="cursor: default;">
                <div id="content" style="top: 0px;">
                    <jsp:include page="ui/header.jsp"/>
                    <div class="container-nav">
                        <div class="container">
                            <button class="open btn btn-default bt-open" title="Menu"><i class="fa fa-bars" aria-hidden="true"></i></button>
                            <%
                                if(Authentication.isEmployeeAdmin(emp))
                                    out.println("<a href='employee.jsp' class='content-nav-bt'>Employee Management</a>");
                                if(Authentication.isHRAdmin(emp))
                                    out.println("<a href='department.jsp' class='content-nav-bt'>Department Management</a>");
                            %>
                        </div>
                    </div>
                    <div class="container content-container" style="text-align: left;color: #000">
                        <div>
                            <h1 class="heading"><i class="fa fa-building" aria-hidden="true"></i> Department Management</h1>
                        </div>
                        <div class="content-div">
                            <!-- 添加部门 -->
                            <div class="saveDept">
                                <h4 id="addDeptTitle" class="saveDept-title subheading" style="cursor:pointer;"><i class="fa fa-chevron-right" aria-hidden="true"></i> Add New Department <i class="fa fa-caret-down" aria-hidden="true"></i></h4>
                                <div id="addDeptBox" style="display:none;">
                                <form  onsubmit="return false;">
                                <table class="form-table">
                                    <tr>
                                        <td>Dept Name</td>
                                        <td><input id="dept-name" class="input-md-width" type="text" minlength="1" maxlength="50"/>
                                            <input id="dept-id" type="hidden" value=""/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top;">Comment</td>
                                        <td><textarea id="dept-comment" class="area-md" maxlength="50"></textarea></td>
                                    </tr>
                                </table>
                                <div class="content-center">
                                    <input type="submit" class="btn btn-primary" value="Submit" onclick="saveDept()"/>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="button" class="bt-cancel btn btn-default" value="Cancel" onclick="cancelSave()"/>
                                </div>
                                </form>
                                </div>
                            </div>
                            <h4 class="subheading"><i class="fa fa-chevron-right" aria-hidden="true"></i> Department & Title Details</h4>
                            <div>
                                <form onsubmit="return false;">
                                <div id="dept-select-div" style="width:670px;display:inline-block">
                                    <input type="text" id="selectDeptSelectOnly" placeholder="Please select departments" style="width: 100%;"/>
                                </div>&nbsp;
                                    <button id="bt-clickToDept" type="submit" class="btn btn-primary" title="Search"><i class="fa fa-search" aria-hidden="true"></i></button>
                                    <button class="btn btn-default" title="Refresh" onclick="listDeptDetails()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                                    <button class="btn btn-danger" title="Delete" edbox data-box-target="#batch-delete-box"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                </form>
                                <div id="dept-title">
                                    
                                </div>
                                <div id="title-ed-box" class="ed-div" style="display:none;">
                                    <h3 id="edit-title-heading" class="subheading" style="margin: 3px;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Titles</h3><br/>
                                    <form onsubmit="return false;">
                                    <table class="model-form-table" style="color: black;">
                                        <tr>
                                            <td>Dept Name</td>
                                            <td id="input-box-edit-title-dept"><input type="text" id="title-select-dept" class="input-md-width"></td>
                                        </tr>
                                        <tr>
                                            <td>Title Name</td>
                                            <td><input type="text" id="input-edit-title-name" class="input-md-width" minlength="1" maxlength="50"/>
                                                <input type="hidden" id="input-edit-title-id"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Authority</td>
                                            <td><div style="margin: auto;"><input type="text" id="input-edit-title-auth" style="width:240px;"/>&nbsp;<a href="#" title="DESCR">&nbsp;&nbsp;<i class="fa fa-tag" aria-hidden="true"></i>&nbsp;&nbsp;</a></div></td>
                                        </tr>
                                        <tr>
                                            <td style="vertical-align: top;">Comment</td>
                                            <td><textarea id="input-edit-title-comment" class="area-md" maxlength="80"></textarea></td>
                                        </tr>
                                        <tr><td></td><td id="edit-title-error-msg" style="color: #d9534f;text-align: left;"></td></tr>
                                    </table>
                                    <div class="content-center" style="margin: 10px;">
                                        <input type="submit" onclick="saveTitle()" class="btn btn-primary" value=" Save "/>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="button" id="bt-edit-title-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                    </div>
                                    </form>
                                </div>
                                <div id="dept-ed-box" class="ed-div" style="display:none;">
                                    <h3 class="subheading" style="margin: 3px;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Department</h3><br/>
                                    <form onsubmit="return false;">
                                    <table class="model-form-table" style="color: black;">
                                        <tr>
                                            <td>Dept Name</td>
                                            <td><input type="text" id="edit-dept-name" class="input-md-width">
                                                <input type="hidden" id="edit-dept-id" class="input-md-width">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="vertical-align: top;">Comment</td>
                                            <td><textarea class="area-md" id="edit-dept-comment" maxlength="80"></textarea></td>
                                        </tr>
                                        <tr><td></td><td id="edit-dept-error-msg" style="color: #d9534f;text-align: left;"></td></tr>
                                    </table>
                                    <div class="content-center" style="margin: 10px;">
                                        <input type="submit" onclick="saveEditDept()" class="btn btn-primary" value=" Save "/>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="button" id="bt-edit-dept-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                    </div>
                                    </form>
                                </div>
                                <div id="title-delete-box" class="ed-div" style="display:none;">
                                    <h3 class="subheading" style="margin-top: 20px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 
                                        Do you really delete <span id="title-delete-name"></span>?<br/> (Employees of this title will also be deleted)</h3><br/>
                                    <div class="content-center" style="margin: 10px;">
                                        <form onsubmit="return false;">
                                            <input type="hidden" id="title-delete-id"/>
                                            <input type="submit" onclick="deleteTitle()" class="btn btn-danger" value=" Delete "/>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="button" id="bt-delete-title-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                        </form>
                                    </div>
                                </div>
                                <div id="dept-delete-box" class="ed-div" style="display:none;">
                                    <h3 class="subheading" style="margin-top: 20px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 
                                        Do you really delete "<span id="dept-delete-name"></span>"?<br/>(Titles&Employees of this department will also be deleted)</h3><br/>
                                    <div class="content-center" style="margin: 10px;">
                                        <form onsubmit="return false;">
                                            <input type="hidden" id="dept-delete-id"/>
                                            <input type="submit" onclick="deleteDept()" class="btn btn-danger" value=" Delete "/>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="button" id="bt-delete-dept-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                        </form>
                                    </div>
                                </div>
                                <div id="batch-delete-box" class="ed-div" style="display:none;">
                                    <h3 class="subheading" style="margin-top: 20px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 
                                        Do you really delete titles? <br/>(Employees of these titles will also be deleted)</h3><br/>
                                    <div class="content-center" style="margin: 10px;">
                                        <form onsubmit="return false;">
                                            <input type="submit" onclick="batchDeleteTitle()" class="btn btn-danger" value=" Delete "/>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="button" id="bt-delete-batch-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sn-nav-wrapper">
                <nav id="nav" class="sn-nav left vertical">
                    <jsp:include page="ui/nav.jsp"/>
                </nav>
            </div>
        </div>
        <script src="static/js/modernizr.custom.25376.js" type="text/javascript"></script>
        <script src="static/js/jquery.js" type="text/javascript"></script>
        <script src="static/js/common-script.js" type="text/javascript"></script>
        <script src="static/dist/js/jquery.secretnav.js" type="text/javascript"></script>
        <script src="static/js/jquery.edbox.js" type="text/javascript"></script>
        <script src="static/js/selectpage.js" type="text/javascript"></script>
        <script type="text/javascript">
            var dept_data = {};
            var authority = {};
            $(function() {
                menu();
                list_dept();
                listDeptDetails();
                list_auth();
            });
            
            function initAuthSelect() {
                $('#input-edit-title-auth').selectPage({
                    showField : 'name',
                    keyField : 'id',
                    data : authority
                });
            }
            
            function list_auth() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/get_all_authority.do",
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            authority = result.data;
                            initAuthSelect();
                        }
                    }
                });
            }
            
            function initDeptSelect() {
                $('#selectDeptSelectOnly').selectPage({
                    showField : 'name',
                    keyField : 'id',
                    data : dept_data,
                    selectOnly : true,
                    pagination : false,
                    listSize : 10,
                    multiple : true
                });
                $('#title-select-dept').selectPage({
                    showField : 'name',
                    keyField : 'id',
                    data : dept_data
                });
            }
            
            function saveDept(){
                if($("#dept-name").val()===""){
                    $.edbox({ danger: "Name can't be blank!" });
                    return;
                }
                
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/save_dept.do",
                    data: {
                        "id": $("#dept-id").val(),
                        "name": $("#dept-name").val(),
                        "comment": $("#dept-comment").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $.edbox({ success: "Save success!"});
                            clearInput();
                            cancelSave();
                            refresh_list_dept();
                            listDeptDetails();
                        }else {
                            $.edbox({ danger: result.msg });
                        }
                    },
                    error: function() {
                        $.edbox({ danger: 'Save failed!' });
                    }
                });
            };
            
            function list_dept() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/list_dept.do",
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            dept_data = result.data;
                            initDeptSelect();
                        }else {
                            $.edbox({ danger: result.msg});
                        }
                    },
                    error: function() {
                        $.edbox({ danger: 'Got failed!' });
                    }
                });
            }
//            <td id="input-box-edit-title-dept"><input type="text" id="title-select-dept" class="input-md-width"></td>
            function refresh_list_dept() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/list_dept.do",
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            dept_data = result.data;
                            $("#dept-select-div").empty();
                            $("<input/>").attr({"type":"text","id":"selectDeptSelectOnly","placeholder":"Please select departments"}).css("width","100%").appendTo($("#dept-select-div"));
                            $("#input-box-edit-title-dept").empty();
                            $("<input/>").attr({"type":"text","id":"title-select-dept","class":"input-md-width"}).appendTo($("#input-box-edit-title-dept"));
                            initDeptSelect();
                        }else {
                            $.edbox({ danger: result.msg});
                        }
                    },
                    error: function() {
                        $.edbox({ danger: 'Got failed!' });
                    }
                });
            }
            
            $("#addDeptTitle").click(function(){
                $("#addDeptBox").stop();
                $("#addDeptBox").slideToggle();
            });
            
            function cancelSave(){
                $("#addDeptBox").slideUp();
            };
            
            function clearInput() {
                $("#dept-id").val("");
                $("#dept-name").val("");
                $("#dept-comment").val("");
            }
            
            $("#bt-clickToDept").click(function(check){
                check.preventDefault();
                listDeptDetails();
            });
            
            function listDeptDetails() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/list_dept_details.do",
                    data: {
                        "deptIds": $('#selectDeptSelectOnly').val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            initDeptList(result.data);
                        }else {
                            $.edbox({ danger: result.msg});
                        }
                    },
                    error: function() {
                        
                        $.edbox({ danger: 'Got failed!' });
                    }
                });
            }
            
            function initDeptList(data){
                $("#dept-title").empty();
                $.each(data, function(){
                    var deptName = $("<b></b>").append("<i class='fa fa-users' aria-hidden='true'></i>&nbsp;&nbsp;"+this.department.name);
                    var deptAdd = $("<a>").attr({"href":"#","edbox":"","data-box-target":"#title-ed-box","dept-id":this.department.id,"title":"New title","class":"white-a"})
                                    .append("<i class='fa fa-plus' aria-hidden='true'></i>");
                    deptAdd.click(function(){
                        $("#edit-title-heading").empty();
                        $("#edit-title-heading").append("<i class='fa fa-pencil-square-o' aria-hidden='true'></i> Add Titles");
                        $("#title-select-dept").val(deptAdd.attr("dept-id"));
                        $('#title-select-dept').selectPageRefresh();
                        $("#input-edit-title-id").val("");
                        $("#input-edit-title-name").val("");
                        $("#input-edit-title-auth").selectPageClear();
                        $("#edit-title-error-msg").empty();
                        $("#input-edit-title-comment").val("");
                    });
                    deptAdd.edbox();
                    var deptOp = $("<a>").attr({"href":"#","edbox":"","data-box-target":"#dept-ed-box","dept-id":this.department.id,"dept-name":this.department.name,"dept-comment":this.department.comment,"title":"Details&Edit","class":"white-a"})
                                    .append("<i class='fa fa-pencil' aria-hidden='true'></i>");
                    deptOp.click(function() {
                        $("#edit-dept-id").val(deptOp.attr("dept-id"));
                        $("#edit-dept-name").val(deptOp.attr("dept-name"));
                        $("#edit-dept-comment").val(deptOp.attr("dept-comment"));
                    });
                    deptOp.edbox();
                    var deptDel = $("<a>").attr({"href":"#","edbox":"","data-box-target":"#dept-delete-box","dept-id":this.department.id,"dept-name":this.department.name,"dept-comment":this.comment,"title":"Delete","class":"white-a"})
                                    .append("<i class='fa fa-trash' aria-hidden='true'></i>");
                    deptDel.click(function(){
                        $("#dept-delete-name").empty();$("#dept-delete-name").append(deptDel.attr("dept-name"));
                        $("#dept-delete-id").val(deptDel.attr("dept-id"));
                    });
                    deptDel.edbox();
                    var deptEdit = $("<div style='display:inline-block;float:right;'></div>").append(deptAdd).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;").append(deptOp).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;").append(deptDel).append("&nbsp;");
                    var deptElem = $("<div class='dept-operation'></div>").append(deptName).append(deptEdit);
                    
                    $("#dept-title").append(deptElem);
                    var deptId = this.department.id;
                    if(this.titles.length===0)
                        $("#dept-title").append("<div class='no-title'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i> No title set up!</div>");
                    $.each(this.titles, function(){
                        var titleElem = $("<div class='dept-title-de'></div>").append("<label class='title-name' for='title"+this.id+"'><input type='checkbox' id='title"+this.id+"' value='"+this.id+"' name='delTitle'/>&nbsp;&nbsp;"+this.name+"</label>");
                        var comment;
                        if(this.comment === null)
                            comment = "";
                        else
                            comment = this.comment;
                        var titleEdit = $("<a>").attr({"href":"#","edbox":"","data-box-target":"#title-ed-box","title-id":this.id,"title-dept":deptId,"title-name":this.name,"title-auth":this.authority,"title-comment":comment,"title":"Details&Edit","class":"title-ed btn btn-default"}).append("<i class='fa fa fa-pencil' aria-hidden='true'></i>");
                        titleEdit.click(function(){
                            $("#edit-title-heading").empty();
                            $("#edit-title-heading").append("<i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit Titles");
                            $("#title-select-dept").val(titleEdit.attr("title-dept"));
                            $('#title-select-dept').selectPageRefresh();
                            $("#input-edit-title-id").val(titleEdit.attr("title-id"));
                            $("#input-edit-title-name").val(titleEdit.attr("title-name"));
                            $("#input-edit-title-auth").val(titleEdit.attr("title-auth"));
                            $("#input-edit-title-auth").selectPageRefresh();
                            $("#edit-title-error-msg").empty();
                            $("#input-edit-title-comment").val(titleEdit.attr("title-comment"));
                        });
                        titleEdit.edbox();
                        var titleDelOp = $("<a title='Delete' edbox data-box-target='#title-delete-box' titleName='"+this.name+"' titleId='"+this.id+"' class='btn btn-danger'></a>").append("<i class='fa fa-trash' aria-hidden='true'></i>");
                        titleDelOp.click(function(){
                            $("#title-delete-name").empty();$("#title-delete-name").append(titleDelOp.attr("titleName"));
                            $("#title-delete-id").val(titleDelOp.attr("titleId"));
                        });
                        titleDelOp.edbox();
                        var titleOperation = $("<div class='title-operation'></div>").append(titleEdit).append("&nbsp;&nbsp;").append(titleDelOp);
                        titleElem.append(titleOperation);
                        $("#dept-title").append(titleElem);
                    });
                });
            }
            
            function saveTitle(){
                $("#edit-title-error-msg").empty();
                if($("#title-select-dept").val()===""){
                    $("#edit-title-error-msg").append("* Department can't be blank!");
                    return;
                }
                if($("#input-edit-title-name").val()===""){
                    $("#edit-title-error-msg").append("* Title name can't be blank!");
                    return;
                }
                if($("#input-edit-title-auth").val()===""){
                    $("#edit-title-error-msg").append("* Authority can't be blank!");
                    return;
                }
                
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/save_title.do",
                    data: {
                        "id": $("#input-edit-title-id").val(),
                        "deptId": $("#title-select-dept").val(),
                        "name": $("#input-edit-title-name").val(),
                        "authority": $("#input-edit-title-auth").val(),
                        "comment": $("#input-edit-title-comment").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $("#bt-edit-title-cancel").click();
                            listDeptDetails();
                        }else {
                            $("#edit-title-error-msg").empty();
                            $("#edit-title-error-msg").append(result.msg);
                        }
                    },
                    error: function() {
                        $("#edit-title-error-msg").empty();
                        $("#edit-title-error-msg").append("Save failed!");
                    }
                });
            };
            function saveEditDept() {
                $("#edit-dept-error-msg").empty();
                if($("#edit-dept-name").val()===""){
                    $("#edit-dept-error-msg").append("* Department name can't be blank!");
                    return;
                }
                
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/save_dept.do",
                    data: {
                        "id": $("#edit-dept-id").val(),
                        "name": $("#edit-dept-name").val(),
                        "comment": $("#edit-dept-comment").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $("#bt-edit-dept-cancel").click();
                            refresh_list_dept();
                            listDeptDetails();
                        }else {
                            $("#edit-dept-error-msg").empty();
                            $("#edit-dept-error-msg").append(result.msg);
                        }
                    },
                    error: function() {
                        $("#edit-dept-error-msg").empty();
                        $("#edit-dept-error-msg").append("Save failed!");
                    }
                });
            };
            
            function deleteTitle() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/delete_title.do",
                    data: {
                        "titleId": $("#title-delete-id").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $("#bt-delete-title-cancel").click();
                            refresh_list_dept();
                            listDeptDetails();
                        }else {
                            alert(result.msg);
                        }
                    },
                    error: function() {
                        alert("Opps, something goes error!");
                    }
                });
            }
            
            function deleteDept() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/delete_dept.do",
                    data: {
                        "deptId": $("#dept-delete-id").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $("#bt-delete-dept-cancel").click();
                            refresh_list_dept();
                            listDeptDetails();
                        }else {
                            alert(result.msg);
                        }
                    },
                    error: function() {
                        alert("Opps, something goes error!");
                    }
                });
            }
            
            function batchDeleteTitle(){
                var delTitles = new Array();
                $("input[name='delTitle']:checked").each(function(){
                    delTitles.push($(this).val());
                });
                if(delTitles.length === 0){
                    alert("Sorry, you didn't select any titles!");
                    $("#bt-delete-batch-cancel").click();
                    return;
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/batch_delete_title.do",
                    data: {
                        "titles": delTitles.toString()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            listDeptDetails();
                            $("#bt-delete-batch-cancel").click();
                        }else{
                            alert(result.msg);
                        }
                    },
                    error: function(){
                        alert("Delete failed!");
                    }
                });
            }
	</script>
    </body>
</html>